<template>
  <div class="contain-view">
    <div class="flext-row-start">
      <div class="name-item">名称：</div>
      <a-input class="input-item" v-model:value="name" placeholder="请输入名称"></a-input>
    </div>

<!--    类型-->
    <div class="flext-row-start mt8">
      <div class="name-item">类型：</div>
      <a-select
          v-model:value="value"
          class="input-item content-left"
          :placeholder="'请选择类型'"
          :options="typeOptions"
          @select="onSelectChange"
      ></a-select>
    </div>

<!--    appid-->
    <div class="flext-row-start mt8">
      <div class="name-item">id：</div>
      <a-input class="input-item" v-model:value="name" placeholder="请输入appId"></a-input>
    </div>

<!--   key -->
    <div class="flext-row-start mt8">
      <div class="name-item">key：</div>
      <a-input class="input-item" v-model:value="name" placeholder="请输入key"></a-input>
    </div>

<!--    url-->
    <div class="flext-row-start mt8">
      <div class="name-item">url：</div>
      <a-input class="input-item" v-model:value="name" placeholder="请输入url"></a-input>
    </div>

<!--    pagePath-->
    <div class="flext-row-start mt8">
      <div class="name-item">路由：</div>
      <a-input class="input-item" v-model:value="name" placeholder="请输入pagePath"></a-input>
    </div>
    <a-button class="mt8 complete-btn" type="primary" @click="oncompleted">完成</a-button>
  </div>
</template>

<script>
const provinceData = ['Zhejiang', 'Jiangsu'];
export default {
name: "menuItem",
  props:{
  },
  setup(){
    return{
      name:"",
      typeOptions:[
          {value:"click",label:"click"},
          {value:"view",label:"view"},
          {value:"scancode_push",label:"scancode_push"},
          {value:"scancode_waitmsg",label:"scancode_waitmsg"},
          {value:"pic_sysphoto",label:"pic_sysphoto"},
          {value:"pic_photo_or_album",label:"pic_photo_or_album"},
          {value:"pic_weixin",label:"pic_weixin"},
          {value:"location_select",label:"location_select"},
          {value:"media_id",label:"media_id"},
          {value:"article_id",label:"article_id"},
          {value:"article_view_limited",label:"article_view_limited"},
      ],
      typeSel:[],
    }
  },
  methods:{
    onSelectChange(e){
      this.typeSel = e;
      console.log("====" + JSON.stringify(e) + "===" + this.typeSel)
    },
    oncompleted(){
      this.$emit("editCompleted")
    }
  }
}
</script>

<style lang="scss" scoped>
  .contain-view{
    padding: 8px;
  }
  .name-item{
    width: 20%;
    text-align:center;
  }
  .input-item{
    width: 80%;
  }
  .content-left{
    text-align: left;
  }
  .complete-btn{
    width: 100%;
    height: 35px;
  }
</style>